<template>
	<view class="">
		<uni-popup ref="popup" type="dialog">
			<view class="content">
				<uni-forms ref="form" v-if="showDialog" :value="formData" :rules="rules" validateTrigger="bind">
					<view class="text-center padding-bottom-sm">
						<text>{{title}}</text>
					</view>
					<view class="fields flex">
						<scroll-view scroll-y="true" class="scroll-Y" show-scrollbar="true">
							<block v-for="(item,index) in formFields" :key="index">
								<uni-forms-item :name="item.name" :label="item.label" labelWidth="100"
									labelAlign="right"
									v-if="!month.ext_fields || month.ext_fields.indexOf(item.option)==-1">
									<block v-if="item.type && item.type == 'date'">
										<cloud-date-picker v-model="formData[item.name]"
											:timestamp="item.format=='timestamp'" :disabled="!isAdmin">
										</cloud-date-picker>
									</block>
									<block v-else-if="item.type && item.type == 'text'">
										<uni-easyinput type="text" v-model="formData[item.name]" :disabled="!isAdmin"
											:placeholder="item.placeholder?item.placeholder:'请输入'+item.label" />
									</block>
									<block v-else-if="item.type && item.type == 'textarea'">
										<uni-easyinput type="textarea" v-model="formData[item.name]"
											:disabled="!isAdmin"
											:placeholder="item.placeholder?item.placeholder:'请输入'+item.label" />
									</block>
									<block v-else-if="item.type && item.type == 'digit'">
										<uni-easyinput type="digit" v-model="formData[item.name]" :disabled="!isAdmin"
											:placeholder="item.placeholder?item.placeholder:'请输入'+item.label" />
									</block>
									<block v-else>
										<cloud-data-checkbox-other v-model="formData[item.name]" :disabled="!isAdmin"
											@otherInput="changeOther(item.name+'_others',index,$event)"
											:extData="month.value" :placeholder="item.placeholder"
											:otherValue="formData[item.name+'_others'] && formData[item.name+'_others'][index]"
											:localdata="formOptions[item.name]" />
									</block>
								</uni-forms-item>
							</block>
						</scroll-view>
					</view>
					<view class="uni-button-group">
						<block v-if="!formData.verified">
							<button type="primary" v-if="isAdmin" class="uni-button" style="width: 100px;"
								@click="submit">提交保存</button>
							<button class="uni-button" style="width: 100px;margin-left: 15px;"
								@click="verifyForm" v-if="formData.operater && $hasPermission('verify_content')">内容审核</button>
						</block>
						<button class="uni-button" style="width: 100px;margin-left: 15px;"
							@click="closePoup">关闭窗口</button>
						<button class="uni-button" style="width: 100px;margin-left: 15px;" @click="println"
							v-if="hasPrint">打印本页</button>
					</view>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				isAdmin: true,
				showDialog: false,
				formFields: [],
				formData: {},
				formOptions: {},
				rules: {}
			};
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			formDataId: {
				type: String,
				default: ""
			},
			month: {
				type: Object,
				default: () => {}
			},
			value: {
				type: [String, Number, Object],
				default: ''
			},
			options: {
				type: Object,
				default: () => {}
			},
			hasPrint: {
				type: Boolean,
				default: true
			},
			printOptions: {
				type: Object,
				default: () => {}
			},
			type: {
				type: String,
				default: ""
			}
		},
		watch: {
			value(newVal) {
				this.setFormData()
			},
			options(newVal) {
				this.formOptions = newVal;
			},
			printOptions(newVal) {
				this.printInfo = newVal;
			}
		},
		created() {
			this.setFormData()
			this.getFormFields(this.type, false, () => {
				console.log("getFormFields after")
				this.$emit("getFormFieldsResult", {
					detail: this.formFields
				});
			});
		},
		methods: {
			setFormData() {
				this.formData = this.value;
				console.log("this.formData.operater", this.formData.operater, this.$store.state.user.userInfo._id)
				this.isAdmin = !this.formData.verified && (!this.formData.operater || this.formData.operater._id == this
					.$store.state.user.userInfo._id);
			},
			open() {
				this.showDialog = true;
				this.$refs.popup.open();
				console.log("formOptions", this.formOptions)
			},
			println() {
				console.log("打印本页", this.formData)
				this.formData.title = this.title;
				this.prints(this.formData, true, this.title)
			},
			closePoup() {
				this.$refs.popup.close();
			},
			/**
			 * 触发表单提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				console.log(this.rules)
				this.$refs.form.submit().then((res) => {
					this.submitForm(res)
				}).catch((errors) => {
					uni.hideLoading()
				})
			},
			verifyForm() {
				let userInfo = this.$store.state.user.userInfo;
				uni.showModal({
					title: "内容审核",
					content: "是否确定完成审核，\n审核后，资料将不允许再修改？",
					success: (res) => {
						if (res.confirm) {
							console.log("修改审核")
							let value = {
								verified: {
									operater: userInfo._id,
									time: Date.now()
								}
							}
							this.$emit("finish", this.formDataId, value);
							this.closePoup();
						}
					}
				})
			},
			submitForm(value) {
				let userInfo = this.$store.state.user.userInfo;
				value.fieldValue = this.month;
				value.operater = {
					_id: userInfo._id,
					username: userInfo.username,
					nickname: userInfo.nickname,
					time: Date.now()
				}
				this.closePoup();
				//value.operater = db.env.uid;
				this.$emit("finish", this.formDataId, value);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #fff;
		padding: 40rpx;
		min-width: 1230rpx;
		border-radius: 16rpx;
	}

	.fields {
		max-height: 1000rpx;
	}

	.uni-button-group {
		margin-top: 20rpx;
		max-width: 1200rpx;
	}
</style>
